/*
 - Set Drupal colors system -
 - Add By wenroo.           -
 - 2018.04.23               -
*/
@btn-primary-top:          #007bc6;
@btn-primary-bottom:       #0071b8;
@btn-primary-color:        #ffffff;

@border-color: #EBF1F1;

@navbar-inverse-link-color: @navbar-inverse-color;

// Classes
.color-primary {
  color: @brand-primary;
  background: transparent;
}
.color-success {
  color: @brand-success;
  background: transparent;
}

.color-info {
  color: @brand-info;
  background: transparent;
}

.color-warning {
  color: @brand-warning;
  background: transparent;
}

.color-error,
.color-danger{
  color: @brand-danger;
  background: transparent;
}

// Breadcrumb
.breadcrumb{
	li{
		color: @breadcrumb-color;
	}
}


// Tables
.table-link-hover{
	&:hover,
	&:focus{
		color: @btn-primary-bottom-hover;
		&:after{
			border-bottom-color: @btn-primary-bottom-hover;
		}
	}
}

table{
	thead{
		tr{
			th{
				a{
					.table-link-hover;
				}
				&.is-active{
					a{
						color: @brand-primary;
						&:after{
							border-bottom-color: @brand-primary;
						}
						.table-link-hover;
					}
				}
			}
		}
	}
	tbody{
		tr{
			&:hover,
			&:focus{
				background-color: lighten(@brand-primary, 90%);
			}
		}
	}
}

// Tabs
.tabs{
	.primary{
		 a{
		 	&:focus{
		 		color: @brand-primary;
		 	}
		 }
	}
}

// Button
@btn-primary-top-hover:     lighten(@btn-primary-top, 7.5%);
@btn-primary-bottom-hover:  lighten(@btn-primary-bottom, 7.5%);
@btn-primary-top-active:    darken(@btn-primary-bottom, 13.5%);
@btn-primary-bottom-active: @btn-primary-top;

@btn-primary-bg:      @brand-primary;
@btn-primary-border:  @btn-primary-bottom;

.button--primary{
  border-color: @btn-primary-border;
  background-color: @btn-primary-bottom;
  background-image: -webkit-linear-gradient(top, @btn-primary-top, @btn-primary-bottom);
  background-image: linear-gradient(to bottom, @btn-primary-top, @btn-primary-bottom);
  color: @btn-primary-color;
  &:hover,
  &:focus{
	  background-image: -webkit-linear-gradient(top, @btn-primary-top-hover, @btn-primary-bottom-hover);
	  background-image: linear-gradient(to bottom, @btn-primary-top-hover, @btn-primary-bottom-hover);
	  box-shadow: 0 0 0.5em 0.1em @btn-primary-top;
	  border-color: @btn-primary-border;
  }
  &:active{
	  background-image: -webkit-linear-gradient(top, @btn-primary-top-active, @btn-primary-bottom-active);
	  background-image: linear-gradient(to bottom, @btn-primary-top-active, @btn-primary-bottom-active);
  }
}

@btn-danger-top:           @brand-danger;
@btn-danger-bottom:        darken(@btn-danger-bg, 7.5%);
@btn-danger-top-hover:     lighten(@btn-danger-top, 7.5%);
@btn-danger-bottom-hover:  lighten(@btn-danger-bottom, 7.5%);
@btn-danger-top-active:    darken(@btn-danger-bottom, 13.5%);
@btn-danger-bottom-active: @btn-danger-top;
.btn--danger{
  border-color: @btn-danger-bottom;
  background-color: @btn-danger-bottom;
  background-image: -webkit-linear-gradient(top, @btn-danger-top, @btn-danger-bottom);
  background-image: linear-gradient(to bottom, @btn-danger-top, @btn-danger-bottom);
  color: #ffffff;
  &:hover,
  &:focus{
  	background-image: -webkit-linear-gradient(top, @btn-danger-top-hover, @btn-danger-bottom-hover);
	  background-image: linear-gradient(to bottom, @btn-danger-top-hover, @btn-danger-bottom-hover);
	  box-shadow: 0 0 0.5em 0.1em @btn-danger-top;
	  border-color: @btn-danger-bottom;
	  color: #ffffff;
  }
  &:active{
	  background-image: -webkit-linear-gradient(top, @btn-danger-top-active, @btn-danger-bottom-active);
	  background-image: linear-gradient(to bottom, @btn-danger-top-active, @btn-danger-bottom-active);
	  color: #ffffff;
  }
}

// Links
a{
	color: @link-color;
	&:hover{
		color: @link-hover-color;
	}
	&.ccms-glyphicon-large {
  	background-color: @brand-primary;
	  color: white;
	}
}

button.link,
a.link{
	color: @link-color;
	&:hover{
		color: @link-hover-color;
	}
}

// Sidebar
@sidebar-background: #171c20;
@sidebar-link: #e7e9ea;


.sidebar{
  background-color: @sidebar-background;
  color: @sidebar-link;
  .nav{
    li{
      a{
      	color: @sidebar-link;
        &:hover {
          background-color: #262f33;
        }
        &:focus,
        &.is-active{
          background-color: #1F272A;
        }
      }
    }
    .nav{
      >li{
        >a{
          padding: 10px 20px;
        }
      }
    }
  }
}


